<template>
  <flex-row class="com-empty">
    <flex-row class="wrapper">
      <img
        v-if="showImg"
        src="../assets/empty.svg"
        :style="{height: height}"
        draggable
        alt
        srcset
        @dragstart="dragHandle"
      />
      <div class="text">暂无数据</div>
    </flex-row>
  </flex-row>
</template>

<script>
import FlexRow from "./base/FlexRow";
export default {
  components: {
    FlexRow
  },
  props: {
    height: {
      type: String,
      default: "100px"
    }
  },
  data() {
    return {
      showImg: false
    };
  },
  created() {
    this.$nextTick(() => (this.showImg = true));
  },
  methods: {
    dragHandle(e) {
      e.preventDefault();
      return false;
    }
  }
};
</script>

<style lang="scss" scoped>
.com-empty {
  height: 100%;
  text-align: center;
  font-size: 14px;
  color: #ccc !important;
  line-height: 2;
  flex: 1;
  .wrapper {
    height: 100%;
    flex-direction: column;
  }
  img {
    width: auto;
  }
}
</style>
